<template>
  <el-card class="update-log" style="height: 200px;">
    <div slot="header" class="clearfix">
      <span>快速入口</span>
    </div>
    <div class="body">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card shadow="hover" style="padding: 25px 0px 25px 0px;" :body-style="{cursor:'pointer', 'text-align':'center'}" @click.native="mockTest()">
            模拟考试
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="padding: 25px 0px 25px 0px;" :body-style="{cursor:'pointer', 'text-align':'center'}" @click.native="queryScore()">
            成绩查询
          </el-card>
        </el-col>
      </el-row>

      <el-dialog :title="title" :visible.sync="open" v-if="open" width="40%" append-to-body>
        <div>
          <el-form :model="form" ref="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="模拟项目" prop="projectName">
                  <el-select v-model="form.projectName" value-key="projectCode" placeholder="请选择模拟项目" filterable clearable size="small"
                             @change="function(p) {return bindProjectData(p)}">
                    <el-option
                            v-for="projectInfo in projectInfoList"
                            :key="projectInfo.projectCode"
                            :label="projectInfo.projectName"
                            :value="projectInfo"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="模拟题库" prop="questionBankName">
                  <el-select v-model="form.questionBankName" value-key="questionBankId" placeholder="请选择模拟题库" filterable clearable size="small"
                             @change="function(q) {return bindQuestionBankData(q)}">
                    <el-option
                            v-for="(q,index) in questionBankListOptions"
                            :key="q.questionBankId"
                            :label="q.questionBankName"
                            :value="q"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="试卷类型" prop="paperType">
                  <el-select v-model="form.paperType"  placeholder="请选择试卷类型" size="small"
                             @change="paperOptions">
                    <el-option
                            v-for="dict in paperTypeList"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择试卷" prop="paperId" v-if="form.paperType === '1' ? true : false">
                  <el-select v-model="form.paperId" value-key="paperId" clearable placeholder="请选择试卷" filterable size="small">
                    <el-option
                            v-for="(q,index) in paperListOptions"
                            :key="q.paperId"
                            :label="q.paperName"
                            :value="q.paperId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" style="float: right;" class="dialog-footer">
            <el-button :loading="buttonLoading" type="primary" size="mini" @click="submitForm">开始答题</el-button>
            <el-button size="mini" @click="cancelDialog">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
  import {listProjectInfo} from "@/api/question/projectInfo";
  import {getQuestionBankByProjectCode} from "@/api/question/questionBank";
  import {getPaperListByQuestionBankId} from "@/api/question/paper";
  import {createExam} from "@/api/exam/exam";

  export default {
      name: "QuickEntry",
      data() {
        return {
          //立项项目下拉框
          projectInfoList: [],
          //题库表
          questionBankListOptions: [],
          // 试卷类型数据字典
          paperTypeList: [],
          // 试卷列表下拉框
          paperListOptions: [],
          //dialog标题
          title: "选择模拟考试项",
          open: false,
          //按钮遮罩层
          buttonLoading: false,
          form: {},
          rules: {
            projectName: [
              { required: true, message: "请选择项目", trigger: "blur"}
            ],
            questionBankName: [
              { required: true, message: "请选择题库", trigger: "blur"}
            ],
            paperType: [
              { required: true, message: "请选择试卷类型", trigger: "blur"}
            ],
            paperId: [
              { required: true, message: "请选择试卷", trigger: "blur"}
            ],
          }
        }
      },
    created() {
        // 初始化项目列表（已发布项目）
        /*this.getProjectInfo();
        //查询试卷类型字典状态
        this.getDicts("paper_type").then(response => {
          this.paperTypeList = response.responseBody.result;
        });*/
    },
    methods:{
        //  项目绑定相关数据
        bindProjectData(p) {
          this.form.projectName = p.projectName;
          this.form.projectCode = p.projectCode;
          //清空已选择题库
          delete this.form.questionBankName;
          // 清空已选择试卷
          delete this.form.paperId;
        //  获取项目所属题库
          this.getQuestionBank(p.projectCode);
        },
        //题库绑定相关数据
        bindQuestionBankData(q) {
          this.form.questionBankName = q.questionBankName;
          this.form.questionBankId = q.questionBankId;
          // 清空已选择试卷
          delete this.form.paperId;
        //  获取题库所属试卷
          this.getPaperList(q.questionBankId)
        },
      // 试卷类型触发选择试卷
      paperOptions(item) {
        if (item === '0') { // 智能组卷清空已选择的试卷
          delete this.form.paperId;
        }
      },
        //获取项目列表
        getProjectInfo() {
          var pageParams= {page: 1, rows: 100,}
          // 仅获取已发布的培训项目
          var quest = {projectStatus: 1}
          listProjectInfo({
            'pageParameter': pageParams,
            'searchParams': quest
          }).then(response => {
            this.projectInfoList = response.responseBody.result;
          })
        },
        // 获取题库列表
        getQuestionBank(projectCode) {
          //题库信息
          getQuestionBankByProjectCode(projectCode).then(response => {
            this.questionBankListOptions = response.responseBody;
          })
        },
        // 通过题库Id获取所属试卷（手动组卷）
        getPaperList(questionBankId) {
          getPaperListByQuestionBankId(questionBankId).then(res => {
            this.paperListOptions = res.responseBody;
          }).catch(err => {
            console.log(err);
          })
        },
        mockTest(){
          // 初始化项目列表（已发布项目）
          this.getProjectInfo();
          //查询试卷类型字典状态
          this.getDicts("paper_type").then(response => {
            this.paperTypeList = response.responseBody.result;
          });
          this.open = true;
          // alert("模拟考试")
        },
        queryScore(){
          alert("这是查询成绩")
        },
        submitForm(){
          this.$refs["form"].validate(valid => {
            if(valid){
              // this.msgSuccess("正在生成试卷，请稍后......");
              this.buttonLoading = true;
              this.form.examType = '1';
              // console.log("=== 模拟考试项表单 ==",JSON.stringify(this.form));
              createExam(this.form).then(response => {
                if (response.retCode === '200') {
                  // 获取试卷ID
                  var paperId = response.responseBody.paperId;
                  var paperType = response.responseBody.paperType;
                  // console.log("试卷ID==",paperId);
                  var routeUrl = this.$router.resolve({
                    //'&paperType='+paperType+
                    path: '/answer?paperId='+paperId+'&examType='+1// 这里的路径就可以正常的写，不需要添加_blank: true
                  })
                  window.open(routeUrl.href, '_blank');
                  // 调出另一个浏览器窗口并设置为全屏
                  // window.open(routeUrl.href, '_blank',"fullscreen,scrollbars");
                  // window.open(routeUrl.href, '_blank',"fullscreen=1,menubar=0,toolbar=0,directories=0,location=0,status=0,scrollbars=0");
                  this.cancelDialog();
                }
                // this.msgSuccess("新增成功");
              }).finally(() => {
                this.buttonLoading = false
              })
            }
          });
        },
        // 关闭Diglog
        cancelDialog(){
          this.form = {};
          this.open = false;
        },
      }
    }
</script>
